<template>
    <div class="page">
        <!-- 搜索 -->

        <swiperM :list="BannerList" :onJumpPath="onJumpPath" home> </swiperM>
        <!-- 云展厅 -->
        <div class="system-cell">
            <div class="system-box">
                <h1 class="system-title">创作你的3D世界，体验未来3D空间</h1>
                <!-- <div class="system-desc">
                    <p>云空间包含极速输出、多端分享、促销转化、数据运营；</p>
                    <p>通过编辑器快速构建自己的3D内容，一键分享Web端，</p>
                    <p>可以互动学习，互动社交，通过数据可视化展示，</p>
                    <p>让客户体验感更加直观。</p>
                </div> -->

                <div class="system-example">
                    <div class="system-example__item" v-for="item in SystemList" :key="item.title">
                        <div class="system-example__image">
                            <img :src="item.image +
                                '?x-oss-process=image/watermark,image_' +
                                toBase64(
                                    'water/logo_white.png?x-oss-process=image/resize,P_50'
                                ) +
                                ',g_center,t_90'
                                " alt="北京华锐云空间" />
                        </div>
                        <div class="system-example__title">
                            {{ item.title }}
                        </div>
                        <div class="system-example__desc">
                            {{ item.desc }}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 企业案例（PGC） -->
        <div class="case-cell">
            <div class="case-box">
                <!-- <h2 class="cell-title">企业案例（PGC）</h2> -->
                <!-- <NuxtLink to="/case.html" rel="nofollow" class="cell-more">
                    查看更多>>
                </NuxtLink> -->

                <template v-if="UpdateList.length">
                    <div class="case-title">
                        最近更新
                    </div>
                    <div class="case-example is-flex">
                        <CaseItemM :item="item" v-for="item in UpdateList" :key="item.id" :isNew="true" />
                    </div>
                </template>

                <template v-for="(item, index) in CaseList" :key="item.id">
                    <div class="case-title" v-if="item.child.length">
                        {{ item.name }}
                    </div>
                    <div class="case-example" :class="{
                        'is-flex':
                            item.child.length && !item.child[0].child,
                    }" v-if="item.child.length">
                        <template v-if="item.child[0].child">
                            <div class="case-example__item" v-for="(child, cIndex) in item.child" :key="child.id">
                                <div class="case-example__title">
                                    <img :src="`${_oss_}images/home/tag.png`" />
                                    {{ child.name }}
                                </div>

                                <RadioButtonGroupM v-if="child.child &&
                                    child.child[0] &&
                                    child.child[0].child
                                    " v-model="caseTabActive[index][cIndex]" :list="child.child
        ? child.child.map(
            (item, index) => ({
                label: item.name,
                value: index,
            })
        )
        : []
        " />


                                <div class="case-example__list" :class="{
                                    'is-flex': !(
                                        GetCaseChild(
                                            child,
                                            index,
                                            cIndex
                                        )[0] &&
                                        GetCaseChild(
                                            child,
                                            index,
                                            cIndex
                                        )[0].child
                                    ),
                                }">


                                    <template v-if="!!child.child
                                        && !!child.child[caseTabActive[index][cIndex]]
                                        && !!child.child[caseTabActive[index][cIndex]].child
                                        && !!child.child[caseTabActive[index][cIndex]].child[0]
                                        && !!child.child[caseTabActive[index][cIndex]].child[0].child">
                                        <RadioButtonGroupM v-model="thirdTabActive[index][cIndex]" :list="child.child[caseTabActive[index][cIndex]].child
                                            ? child.child[caseTabActive[index][cIndex]].child.map(
                                                (item, index) => ({
                                                    label: item.name,
                                                    value: index,
                                                })
                                            )
                                            : []
                                            " style="margin-top: 0;" />

                                        <div class="case-example__list is-flex">
                                            <template v-for="cItem in GetCaseChild(
                                                child,
                                                index,
                                                cIndex,
                                                thirdTabActive[index][cIndex]
                                            )">
                                                <CaseItemM :item="cItem" :line="cItem.is_single == 1" />
                                            </template>
                                        </div>
                                    </template>

                                    <template v-else v-for="cItem in GetCaseChild(
                                        child,
                                        index,
                                        cIndex
                                    )">
                                        <CaseItemM :item="cItem" :line="cItem.is_single == 1" />
                                    </template>
                                </div>
                            </div>
                        </template>
                        <CaseItemM v-else :item="child" :line="child.is_single == 1" v-for="child in item.child" />
                    </div>
                </template>
            </div>
        </div>

        <!-- 模板库 -->
        <div class="template-cell">
            <div class="template-box">
                <h5 class="cell-title">模板库</h5>
                <NuxtLink to="/template.html" rel="nofollow" class="cell-more">
                    查看更多>>
                </NuxtLink>

                <div class="radio-container">
                    <RadioButtonGroupM line v-model="templateTabActive" :list="templateTabList" />
                </div>

                <div class="template-cate-radio" v-if="Object.keys(templateCategoryList).length">
                    <RadioButtonGroupM v-model="templateCategoryActive" :list="templateCategoryList[
                        templateTabList[templateTabActive].code
                    ]
                        " keyName="name" valueName="id" @change="onTemplateCategoryChange" />
                </div>
                <TemplateGroupM :list="TemplateList" :seeMore="false" />
            </div>
        </div>

        <!-- 用户发布（UGC） -->
        <div class="works-cell">
            <div class="works-box">
                <h3 class="cell-title">作品广场（UGC）</h3>
                <NuxtLink to="/worksSquare.html" rel="nofollow" class="cell-more">
                    查看更多>>
                </NuxtLink>

                <div class="radio-container">
                    <RadioButtonGroupM line v-model="worksTabActive" :list="worksTabList" />
                </div>
                <WorksGroupM :list="WorksList" :type="worksTabActive" />
            </div>
        </div>

        <!-- 新闻动态 -->
        <div class="news-cell" ref="newsRef">
            <div class="news-box">
                <h4 class="cell-title">新闻动态</h4>
                <NuxtLink to="/news.html" rel="nofollow" class="cell-more">
                    查看更多>>
                </NuxtLink>

                <NewsGroupM :list="NewsList" />
            </div>
        </div>
    </div>
</template>
<script setup>
import { useContent } from ".";
const {
    SystemList,
    CaseList,
    UpdateList,
    caseTabActive,
    templateTabActive,
    templateTabList,
    templateCategoryList,
    templateCategoryActive,
    TemplateList,
    NewsList,
    WorksList,
    BannerList,
    worksTabActive,
    worksTabList,
    thirdTabActive,
    onJumpPath,
    onTemplateCategoryChange,
    GetCaseList,
    GetUpdateList,
    GetTemplateList,
    GetBannerList,
    GetNewsList,
    GetWorksList,
    GetCaseChild,
    GetTemplateCategory,
    GetType,
} = useContent();

onMounted(async () => {
    await GetType();

    GetUpdateList();
    GetTemplateCategory();
    GetBannerList(118);
    GetCaseList();
    GetWorksList(4);
    GetTemplateList(2);
    GetNewsList();
});
</script>
<style lang="scss" scoped>
.search-fixed {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99;
}

.page {
    background-color: #f5f6fa;
}

.cell-title {
    color: #111;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
}

.cell-more {
    position: absolute;
    right: 15px;
    top: 3px;
    color: #5085fb;
    cursor: pointer;
    font-size: 12px;
    text-decoration: none;
}

.system-cell {
    padding: 15px 0;

    .system-box {
        text-align: center;

        .system-title {
            font-size: 20px;
            line-height: 1em;
            font-weight: 600;
            color: #111;
        }

        .system-desc {
            margin-top: 11px;
            font-size: 12px;
            color: #666;
            line-height: 18px;
        }

        .system-example {
            display: flex;
            flex-wrap: wrap;
            margin-top: 11px;
            padding: 0 15px;

            &__image {
                width: 155px;
                height: 100px;
                overflow: hidden;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            &__item {
                width: 165px;
                height: 165px;
                padding: 5px;
                border-radius: 2px;
                background-color: #fff;
                margin-right: 15px;
                margin-bottom: 15px;

                &:nth-of-type(2n) {
                    margin-right: 0;
                }
            }

            &__title {
                font-size: 14px;
                font-weight: 500;
                color: #111;
                text-align: center;
                margin-top: 10px;
            }

            &__desc {
                font-size: 12px;
                margin-top: 11px;
                color: #666;
            }
        }
    }
}

.case-cell {
    padding: 10px 0 0;

    .case-box {
        width: 100%;
        position: relative;
        margin: 0 auto;

        .radio-button-group {
            margin-top: 15px;
        }

        .cell-title-2 {
            position: relative;
            padding-left: 12px;
            color: #5085fb;
            line-height: 20px;
            user-select: none;

            &::after {
                content: "";
                width: 3px;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                background-color: #5085fb;
                border-radius: 2px;
                overflow: hidden;
            }
        }

        .case-title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 10px;
            padding-left: 15px;
            color: #333;
        }

        .case-example {
            padding: 0 15px;

            &__title {
                display: flex;
                align-items: center;
                font-size: 14px;
                color: #5085fb;

                img {
                    width: 14px;
                    height: 14px;
                    margin-right: 5px;
                }
            }

            &.is-flex {
                display: flex;
                flex-wrap: wrap;
            }

            &__list {
                margin-top: 15px;

                &.is-flex {
                    display: flex;
                    flex-wrap: wrap;
                }
            }
        }
    }
}

.works-cell {
    padding: 10px 0 0;

    .works-box {
        width: 100%;
        position: relative;
        margin: 0 auto;
    }

    .radio-container {
        margin: 20px 0;
        padding: 0 15px;
    }
}

.template-cell {
    .template-box {
        margin: 0 auto;
        position: relative;
    }

    .radio-container {
        margin: 20px 0;
        padding: 0 15px;
    }

    .template-cate-radio {
        margin-bottom: 10px;
        padding: 0 15px;
    }
}

.news-cell {
    padding-top: 40px;

    .news-box {
        margin: 0 auto;
        position: relative;
    }
}
</style>
